<template>
	<view class="channel">
		<u-grid :border="false" @click="clickchannel" col="5">
			<u-grid-item v-for="(channel, index) in list" :key="index" >
				<view :class="'iconfont '+channel.icon"></view>
				<text class="grid-text">{{ channel.name }}</text>
			</u-grid-item>
		</u-grid>
	</view>
</template>

<script>
	export default {
		props: {
			channelList: {
				type: Array
			}
		},
		data() {
			return {
				list: [{
						icon: 'icon-jiafanglei',
						name: '居家'
					}, {
						icon: 'icon-chuju',
						name: '餐厨'
					}, {
						icon: 'icon-shucai',
						name: "饮食"
					}, {
						icon: 'icon-lvhangxiang-duosexianxing',
						name: '配件'
					},
					{
						icon: 'icon-fushilei',
						name: '服装'
					}, {
						icon: 'icon-muyingyongpin',
						name: '婴童'
					}, {
						icon: 'icon-shouzhang',
						name: '杂货'
					}, {
						icon: 'icon-xihuyongpin',
						name: '洗护'
					},
					{
						icon: 'icon-yuzhouxingqiu-03',
						name: '志趣'
					}, {
						icon: 'icon-kouhong',
						name: '美妆'
					}
				]
			}
		},
		mounted() {
			console.log(79878);
		},
		methods: {
			clickchannel(name) {
				console.log(name);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import 'uview-ui/index.scss';
	$marginBottom: 30rpx;
	$backColor: #f4f4f4;

	.channel {
		padding-bottom: $marginBottom;
		background-color: $uni-bg-color;	
					.iconfont{
						font-size: 20px;
						margin: 10px 0;
					}
				
	}
</style>
